<template>
  <div class="seat" :class="{ mini: size == 'mini' }" :style="{ height: height }">
    <template v-if="!loading">
      <div class="status-tip">
        <wd-status-tip :image="icon[type] || 'content'" tip="" />
      </div>

      <template v-if="type === 'no-collect'">
        <div class="tip">暂无收藏</div>
        <div class="sub-tip">点击♥即可收藏对应的民宿</div>
        <div class="btn active" @click="toIndex()">随便逛逛</div>
      </template>

      <template v-else-if="type === 'no-login'">
        <div class="tip">未登录</div>
        <div class="sub-tip">登陆后可查看数据</div>
        <div class="btn active" @click="login()">立即登录</div>
      </template>

      <template v-else-if="type === 'no-order'">
        <div class="tip">暂无相关订单</div>
        <div class="sub-tip">登陆后可查看数据</div>
        <div class="btn active" @click="toIndex()">随便逛逛</div>
      </template>

      <template v-else-if="type === 'no-occupant'">
        <div class="tip">暂无入住人信息</div>
        <div class="sub-tip"></div>
        <div class="btn active" @click="to('/pages-sub/hotel/occupant/add')">
          <wd-icon class="mr-12rpx" name="add" size="30rpx" color="#fff"></wd-icon>
          新增入住人
        </div>
      </template>

      <template v-else>
        <div class="tip">暂无数据</div>
      </template>
    </template>

    <div class="" v-else>
      <wd-loading type="outline" color="#1F2026" size="80rpx" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/index'
import { switchTab, to } from '@/utils/page'
defineOptions({ name: 'Seat' })

defineProps({
  type: {
    type: String,
    default: '',
  },
  height: {
    type: String,
    default: '100vh',
  },
  loading: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: 'large',
  },
})

const icon = {
  'no-order': 'search', // 没有订单信息
  'no-login': 'content', // 未登录
  'no-collect': 'collect', // 收藏列表为空
}

function toIndex() {
  switchTab('/pages/home/index/index')
}

// 登录
const userStore = useUserStore()
function login() {
  userStore.setShowModal(true)
}
</script>
<style lang="scss" scoped>
.seat {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-bottom: 400rpx;
  background-color: #fff;

  &.mini {
    padding-bottom: 0 !important;
    .status-tip {
      transform: scale(0.8);
    }
    .tip {
      margin-top: -20rpx !important;
      font-size: 28rpx !important;
    }
  }

  .tip {
    margin-top: 56rpx;
    font-size: 35rpx;
    color: var(--color2);
  }
  .sub-tip {
    margin-top: 20rpx;
    font-size: 27rpx;
    color: var(--color4);
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 374rpx;
    height: 92rpx;
    margin-top: 150rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: var(--color1);
    border-radius: 48rpx;
    box-shadow: 0px 17rpx 28rpx rgba(#1f2026, 0.3);
  }
}
</style>
